
<script>
import dmbForm from "@/components/DmbForm";
import dmbTable from "@/components/LTable/index.vue";
import {
  formBase,
  tableBase, 
  cellStyle,
  headerCellStyle,
  tableFormStyle,
  formItemStyle,
} from "./config";
import { mapState } from "vuex";
import dayjs from "dayjs";
import store from "@/store";
const defaultForm = {
  startTime: "",
  endTime: "",
shelfEmployee:''
};
import {
  customsClearanceCompany_ListAPI, 
} from "@/api/data/customs-clearance-company.js";
import {
  bank_account_delAPI, 
} from "@/api/payment/bank_account.js";
export default {
  name: "specialdel",
  computed: {
    ...mapState({
      company: (state) => state.custom_dict.company,
      shop: (state) => state.custom_dict.shop,
    }),
    formItemStyle() {
      return formItemStyle;
    },
    tableFormStyle() {
      return tableFormStyle;
    },
    cellStyle() {
      return cellStyle;
    },
    headerCellStyle() {
      return headerCellStyle;
    },
  },
  components: { dmbTable, dmbForm },
  data() {
    return {
      propsSearchForm: { ...defaultForm },
      rebase: formBase,
      requestConfig: {
        url: "/payment/bankAccount/queryList",
        method: "get",
        montage: true,
      },  
       setRequest: {
        url: "/payment/bankAccount/update",
        method: "put",
        montage: false,
      },
       addRequest: {
        url: "/payment/bankAccount/add",
        method: "put",
        montage: false,
      },
      selectionArr: [], // 多选框内容
      selectionArr2: [], // 多选框内容
      tableSearchForm: { ...defaultForm },
      listUser: [],
      customsClearanceCompany_List: [],
    };
  },
  mounted() {
      customsClearanceCompany_ListAPI().then((res) => {
        console.log('清关',res,this.rebase.find(el=>el.label === '清关公司'));
        this.rebase.find(el=>el.label === '清关公司').options = res.rows;
        this.customsClearanceCompany_List = res.rows
      })
      .catch((err) => {});
  },
  methods: {
    tableBase() {
      return tableBase;
    }, 
    // 导出
    async downLoad() {
      console.log(1,this.selectionArr);
      if (this.selectionArr.length > 0) { 
     const ids = this.selectionArr.map(v=> v.id )
        this.download(
          "/payment/bankAccount/export",
          {ids},
          `银行账号管理_${dayjs().format("YYYY-MM-DD HH:mm:ss" )}.xlsx`
        );
      } else {
        this.$message.error("请选择条数据导出");
      }
    }, 
    // 多选框内容
    selectionChange(data) {
      this.selectionArr = data;
    },
    async del(id) {
      console.log('确定要删除吗？');
      await this.$confirm("确定要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      await bank_account_delAPI(id);
      this.$refs.table.getListData();
      this.$message.success("删除成功");
    },
  },
  watch: {
    propsSearchForm: {
      deep: true,
      handler: function (value) {
        this.tableSearchForm = { ...value }; 
        // 店铺
        if (value.store) {
          const obj = this.shop.find((item) => {
            return item.id == value.store;
          })
          this.tableSearchForm.store = obj ? obj.shopName : "";
        }
        
      },
    },
  },
};
</script>
<template>
  <div>
    <div class="  overflow-auto">
      <dmb-form
        ref="form"
        :form-items="rebase"
        :model-value="propsSearchForm"
        :item-style="formItemStyle"
      @update="(row) => (propsSearchForm = row)"
      >
        <template v-slot:header="row" class="flex flex-row-reverse">
          <div class="mb-3 flex flex-row-reverse">
            <div>
              <el-button type="success" @click="$refs.table.getListData()"
                >查询</el-button
              >
              <el-button type="primary" @click="downLoad">导出</el-button>  
            </div>
          </div>
        </template>
      </dmb-form>
    </div>
  <dmb-table
          ref="table"
          :CustomDoubleClick="true"
         :operateWether="true" 
          :prop-list="tableBase()"
        :is-operate="true"
          :show-index-column="true"
          select-column-type="CHECKBOX"
          :props-search-form="tableSearchForm"
          :req-request="requestConfig" 
        :set-request="setRequest"
        :add-request="addRequest"
          select-key="id"
          :cell-style="cellStyle"
          :header-cell-style="headerCellStyle"
          :initialize="false"
          :change-search-form="false"
          :show-footer="true"
          :form-item-style="tableFormStyle"
          @selectionChange="
            (row) => {
              selectionArr = row;
            }
          " >
             <template v-slot:operate="{ row }">
          <el-button type="danger" v-if="row.id" @click="del(row.id)"  >删除</el-button  >
        </template>
          <!-- 是否启用（0=未启用，1=已启用） -->
        <template v-slot:isEnable="{ row }">  
           <el-checkbox :true-label="1" :false-label="0" v-model="row.isEnable"></el-checkbox>
        </template>
  </dmb-table>
  </div>
</template>

<style scoped lang="scss">
.son {
  overflow: auto;
}
</style>
